'use client';

import { Modal, Descriptions, Tag } from 'antd';
import { UserInfo } from '@/types/user';
import { USER_ROLE_TEXT, USER_STATUS_TEXT } from '@/constants/user';

interface UserInfoModalProps {
  open: boolean;
  onCancel: () => void;
  userInfo: UserInfo | null;
}

const UserInfoModal: React.FC<UserInfoModalProps> = ({
  open,
  onCancel,
  userInfo,
}) => {
  if (!userInfo) return null;

  return (
    <Modal
      title="用户信息"
      open={open}
      onCancel={onCancel}
      footer={null}
      width={600}
    >
      <Descriptions column={2} bordered>
        <Descriptions.Item label="用户ID" span={2}>
          {userInfo.id}
        </Descriptions.Item>
        
        <Descriptions.Item label="用户名">
          {userInfo.username}
        </Descriptions.Item>
        
        <Descriptions.Item label="真实姓名">
          {userInfo.realName}
        </Descriptions.Item>
        
        <Descriptions.Item label="手机号">
          {userInfo.phone}
        </Descriptions.Item>
        
        <Descriptions.Item label="邮箱">
          {userInfo.email || '-'}
        </Descriptions.Item>
        
        <Descriptions.Item label="角色">
          <Tag color="blue">{USER_ROLE_TEXT[userInfo.role]}</Tag>
        </Descriptions.Item>
        
        <Descriptions.Item label="状态">
          <Tag color={userInfo.status === 'normal' ? 'green' : 'red'}>
            {USER_STATUS_TEXT[userInfo.status]}
          </Tag>
        </Descriptions.Item>
        
        <Descriptions.Item label="团队">
          {userInfo.teamName || '-'}
        </Descriptions.Item>
        
        <Descriptions.Item label="账户余额">
          ¥{userInfo.balance.toFixed(2)}
        </Descriptions.Item>
        
        <Descriptions.Item label="实名认证">
          <Tag color={userInfo.isVerified ? 'green' : 'orange'}>
            {userInfo.isVerified ? '已认证' : '未认证'}
          </Tag>
        </Descriptions.Item>
        
        <Descriptions.Item label="创建时间" span={2}>
          {userInfo.createdAt}
        </Descriptions.Item>
        
        <Descriptions.Item label="更新时间" span={2}>
          {userInfo.updatedAt}
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};

export default UserInfoModal; 